<template>
    <div
        class="supplementCardList"
        v-loading="tableLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <!-- 附卡列表 -->
        <el-card class="box-card">
            <div slot="headerss" class="clearfix">
                <span>附卡列表</span>
            </div>
            <div class="container">
                <el-table :data="tableData" stripe border class="heard-bg business_table">
                    <el-table-column
                        v-for="(item, index) in contactTableColumn"
                        :key="index"
                        :label="item.label"
                    >
                        <template slot-scope="scope">
                            <span
                                v-if="item.value === 'EXPIRE'"
                            >{{ scope.row.EXPIRE | getFormatDate }}</span>
                            <span
                                v-else-if="item.value === 'PRODUCT'"
                            >{{ scope.row.PRODUCT | getFormatText(productList, 2) }}</span>
                            <span
                                v-else-if="item.value === 'CANCLCODE'"
                            >{{ scope.row.CANCLCODE | getFormatText(cardStatusList, 1) }}</span>
                            <span
                                v-else-if="item.value === 'LMTOPT'"
                            >{{ scope.row.LMTOPT === 1 ? scope.row.CRPER : (scope.row.LMTOPT === 0 ? data3001.TEMPLIMIT : scope.row.CRDLIMIT) }}</span>
                            <span v-else>{{ scope.row[item.value] }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { getDictSelectList } from '@/utils/Common'

export default {
    name: 'supplementCardList',
    data() {
        return {
            tableLoading: false, // 表格loading
            productList: [], // 卡产品 列表
            cardStatusList: [], // 卡状态 列表
            tableData: [], // 联系人信息列表数据
            contactTableColumn: [
                {
                    label: '附卡卡号',
                    value: 'CARDNBR'
                },
                {
                    label: '凸字姓名',
                    value: 'EMBNAME'
                },
                {
                    label: '有效期(年-月)',
                    value: 'EXPIRE'
                },
                {
                    label: '卡片产品',
                    value: 'PRODUCT'
                },
                {
                    label: '卡片状态',
                    value: 'CANCLCODE'
                },
                {
                    label: '附卡额度',
                    value: 'LMTOPT'
                }
            ], // 联系人信息表格 展示项
        }
    },

    // 取缓存信息
    computed: mapState({
        data3001: state => state.common.cardAccountInfo_3001, // 默认卡信息
        3004: state => state.common.cardInfo_3004, // 默认卡信息
        defaultParams: state => state.common.defaultParams, // 接口默认参数
    }),

    mounted() {
        this.init()
    },

    filters: {
        // 格式化日期
        getFormatDate(val) {
            let time = '--'
            if (val && val.trim()) {
                let year = val.substring(0, 2)
                let date = val.substring(val.length - 2)
                time = year + '-' + date
            }
            return time
        },

        // 文字转译
        getFormatText(val, list, type) {
            let text = ''
            if (val) {
                list.forEach((item, index) => {
                    if (type === 2) {
                        let str = ('00000000000000' + val)
                        if (item.code.trim() === str.substring(str.length - 4)) {
                            text = item.label
                        }
                    } else {
                        if (item.code.trim() == val.trim()) {
                            text = item.label
                        }
                    }
                })
            }
            return text
        }
    },

    methods: {

        // 初始化执行
        async init() {
            // 卡产品 列表
            this.productList = await getDictSelectList('PRODUCT', this)

            // 卡状态 列表
            this.cardStatusList = await getDictSelectList('CLOCD', this)

            if (this[3004] && this[3004].MAFLAG === '1') { // 当前卡号位主卡时查询夫卡列表
                this.getCardList()
            }
        },

        // 获取联系人信息
        getCardList() {
            this.tableLoading = true
            const appBody = {
                CARDNBR: this[3004].CARDNO || '', // 卡号

            }
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams))
            defaultParams.body.appHead.tranCode = '3070'
            defaultParams.body.appBody = appBody

            // 跑 3070 交易
            this.$post.common.transPort(defaultParams).then(res => {
                this.tableLoading = false
                if (res.status === 200) {
                    let result = JSON.parse(res.data.jsonRes)
                    console.log(result, '响应数据 -- 3070')
                    if (result.sysHead.rspCd === '000000') { // 判断交易是否成功
                        let tableData = result.body.appBody.dataList || []
                        this.tableData = tableData.filter(item => item.CARDHOLDER !== 1)

                    } else {
                        const errorMsg = '错误代码：' + result.sysHead.rspCd + ', 错误信息：' + result.sysHead.rspMsg
                        this.$alert(errorMsg, result.sysHead.rspDesc, {
                            customClass: 'error'
                        })
                    }
                } else {
                    this.tableLoading = false
                    this.$alert('请求失败!', '提示', {
                        customClass: 'error'
                    })
                }

            })
        }
    }
}
</script>

<style lang="scss" scoped>
</style>